<template >
  <transition v-if="show">
    <div class="vue3-modal">
      <div class="modal-bg"></div>
      <div class="modal-main" :style="boxStyle">
        <header
          :style="{ color: headerTextColor, 'background-color': headerColor }"
        >
          {{ headerText }}
        </header>
        <main :style="textStyle">{{ contentText }}</main>
        <footer>
          <button class="btn btn-main" @click="confirm">
            {{ confirmText }}
          </button>
          <button class="btn" @click="close">{{ cancelText }}</button>
        </footer>
      </div>
    </div>
  </transition>
</template>

<script>
import { computed } from "vue";
import props from "./props";

export default {
  name: "Modal",
  props: props,

  setup(props, context) {
    function close() {
      context.emit("close");
      context.emit("update:show", false);
    }

    function confirm() {
      context.emit("handleConfirm");
      context.emit("update:show", false);
    }

    let textStyle = computed(() => {
      return {
        color: props.contentTextColor,
      };
    });
    let boxStyle = computed(() => {
      return {
        width: `${props.width}px`,
        "border-radius": `${props.borderReadis}px`,
      };
    });

    return {
      close,
      confirm,
      textStyle,
      boxStyle,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "./modal.scss";
</style>